<template>
  <div class="setUp-container">
    <search-header class="setUp-header">
      <template v-slot:left>
        <van-icon name="arrow-left" color="#aaa9a9" @click="goBack" />
      </template>
      <template v-slot:mid> 设置 </template>
      <template v-slot:right>
        <router-link to="/search">
          <van-icon name="" size="25px"
        /></router-link>
      </template>
    </search-header>
    <div class="action-card">
      <van-cell title="编辑资料" icon="edit" is-link />
      <van-cell title="小思同学" icon="chat-o" is-link />
      <van-cell title="退出登录" icon="warning-o" is-link @click="logout" />
    </div>
  </div>
</template>

<script>
import searchHeader from "../components/search-header.vue";
export default {
  components: { searchHeader },
  name: "SetUp",
  methods: {
    goBack() {
      this.$router.back();
    },
    logout() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      let isLogin = user.isLogin;
      if (!isLogin) {
        this.$dialog
          .confirm({
            message: "确定要退出吗？",
          })
          .then(() => {
            // on confirm
            setTimeout(() => {
              this.$router.push({
                path: "/index/collection",
              });
            }, 500);
            user.isLogin = !isLogin;
            localStorage.setItem("userInfo", JSON.stringify(user));
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.$toast("你还没有登录!");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.setUp-container {
  padding-top: 40px;
  .setUp-header {
    height: 40px;
    line-height: 40px;
    .van-icon {
      padding-top: 10px;
    }
  }
}
.action-card {
  .van-cell {
    font-size: 20px;
  }
}
</style>